import Vue from 'vue'
import VueRouter from 'vue-router'
import local from '@/utils/local'

Vue.use(VueRouter)

// 引入组件
import Login from '@/views/login/Login.vue';
import Layout from '@/views/layout/Layout.vue'

// 路由配置信息
const routes = [
  //登录
  {
    path: '/login',
    component: Login,
    visible: false
  },
  //后台首页
  {
    path: '/',
    component: Layout,
    meta: {title: '后台首页', path: '/home', icon: 'icon-home'},
    redirect: '/home',
    visible: true,
    children: [
      {
        path: '/home',
        component: () => import('@/views/home/Home.vue')
      }
    ]
  },
]

const router = new VueRouter({
  routes
})


const dynamicRoutes = [
  // 订单管理
  {
    path: '/order',
    component: Layout,
    redirect: '/order/order-list',
    meta: {title: '订单管理', path: '/order', icon: 'icon-order1'},
    visible: true,
    children: [
      // 订单编辑
      {
        path: '/order/order-edit',
        component: () => import('@/views/order/OrderEdit.vue'),
        meta: {title: '订单编辑', path: '/order/order-edit'},
      },
      // 订单列表
      {
        path: '/order/order-list',
        component: () => import('@/views/order/OrderList.vue'),
        meta: {title: '订单列表', path: '/order/order-list'},
      },
    ]
  },

  // 账号管理
  {
    path: '/account',
    component: Layout,
    redirect: '/account/account-list',
    meta: {title: '账号管理', path: '/account', icon: 'icon-user'},
    visible: true,
    children: [
      // 添加账号
      {
        path: '/account/account-add',
        component: () => import('@/views/account/AccountAdd.vue'),
        meta: {title: '添加账号', path: '/account/account-add',roles: ['super']},
      },
      //账号列表
      {
        path: '/account/account-list',
        component: () => import('@/views/account/AccountList.vue'),
        meta: {title: '账号列表', path: '/account/account-list',roles: ['super']},
      },
      //修改密码
      {
        path: '/account/password-modify',
        component: () => import('@/views/account/PasswordModify.vue'),
        meta: {title: '修改密码', path: '/account/password-modify',},
      },
      // 个人中心
      {
        path: '/account/personal-center',
        component: () => import('@/views/account/PersonalCenter.vue'),
        meta: {title: '个人中心', path: '/account/personal-center'},
      },
    ]
  },

  //商品管理
  {
    path: '/goods',
    component: Layout,
    redirect: '/goods/goods-list',
    meta: {title: '商品管理', path: '/goods', icon: 'icon-goods'},
    visible: true,
    children: [
      // 商品添加
      {
        path: '/goods/goods-add',
        component: () => import('@/views/goods/GoodsAdd.vue'),
        meta: {title: '商品添加', path: '/goods/goods-add',roles: ['super']},
      },
      // 商品列表
      {
        path: '/goods/goods-list',
        component: () => import('@/views/goods/GoodsList.vue'),
        meta: {title: '商品列表', path: '/goods/goods-list'},
      },
      // 商品分类
      {
        path: '/goods/goods-cate',
        component: () => import('@/views/goods/GoodsCate'),
        meta: {title: '商品分类', path: '/goods/goods-cate'},
      },
    ]
  },
  //店铺管理
  {
    path: '/shop',
    component: Layout,
    meta: {title: '店铺管理', path: '/shop',roles: ['super'], icon: 'icon-shop'},
    visible: true,
    children: [
      {
        path: '',
        component: () => import('@/views/shop/Shop.vue')
      }
    ]
  },

  //销售统计
  {
    path: '/total',
    component: Layout,
    redirect: '/total/goods-total',
    visible: true,
    meta: {title: '销售统计', path: '/total',roles: ['super'], icon: 'icon-sum'},
    children: [
      // 商品统计
      {
        path: '/total/goods-total',
        component: () => import('@/views/total/GoodsTotal.vue'),
        meta: {title: '商品统计', path: '/total/goods-total'},
      },
      // 订单统计
      {
        path: '/total/order-total',
        component: () => import('@/views/total/OrderTotal.vue'),
        meta: {title: '订单统计', path: '/total/order-total'},
      },
    ]
  },
  
]


const options404 = [
  {
    path: '*',
    redirect: '/error404',
    visible: false,
  },
  {
    path: '/error404',
    visible: false,
    component: () => import('@/views/error/Error404.vue')
  }
]

/**
 * 判断是否有权限
 * @param {单个路由对象} router
 * @param {当前用户角色} role
 * @returns 返回true就是有权限 false就是没有权限
 * 
 */
const hasPremission = (router, role) => {
  // 如果在meta中配置了roles
  if (router.meta && router.meta.roles) {
      return router.meta.roles.includes(role)
  } else {
    return true
  }
}

/**
 * 计算出当前角色有权限访问哪些路由
 * 
 */
const calAccessRoutes = (dynamicRoutes, role) => {
  let accessRoutes = dynamicRoutes.filter(v => {
    if (hasPremission(v, role)) {
      if (v.children && v.children.length) {
        v.children = calAccessRoutes(v.children, role)
      }

      return true
    } else {
      return false
    }
  })
  return accessRoutes
}

/**
 * 计算有权限访问的菜单
 * @param {可以访问的路由 已经算好了} addRoutes
 * @return {要在导航显示的菜单}
 */
const calcMenus = (routes) => {
  let menus = routes.filter(v => v.visible)
  return menus
}

/**
 * 计算最终动态路由
 * 
 */
export const calcDynamicRoutes = () => {
  let role = local.get('role');

  if (!role) return

  // 把有权限访问的路由算出来
  let accessRoutes = calAccessRoutes(dynamicRoutes, role);
  let result = [...routes, ...accessRoutes, ...options404];

  // 计算有权限访问的菜单
  let menus = calcMenus(result);
  local.set('menus', menus)
    // 把菜单选项放入本地存储 因为要去菜单组件中使用这个menus数据渲染

  // 把算出来的加入路由实例对象中  这里就是调用这个方法后 路由信息数组对象会和原本的合并
  router.addRoutes(result)
}
calcDynamicRoutes()



router.beforeEach((to, from, next) => {
  let isLogin = local.get('token') ? true : false

  if (isLogin) {
    next()
  } else {
    // 否则是没有登录的状态
    if (to.path === '/login') {
      next()
    } else {
      next({ path: '/login' })
    }
  }
})



const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

export default router
